<template>
	<div class="fixed top-0 bottom-0 left-0 right-0">
		<el-scrollbar class="w-full h-full">
			<div v-if="!loadingFlag" class="px-6 space-y-4">
				<div
					class="grid grid-flow-row grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
				>
					<el-card
						v-for="(items, itemsIndex) in statisticCard"
						:key="itemsIndex"
						body-style="padding: 16px 0 10px;"
						body-class="flex justify-around w-full divide-x divide-dashed"
					>
						<div
							v-for="(item, itemIndex) in items"
							:key="itemIndex"
							class="flex-1"
						>
							<el-statistic :title="item.title" :value="item.value" />
						</div>
					</el-card>
				</div>
			</div>

			<departmentCheckbox
				class="px-6"
				v-if="!focusChart"
				@doSelected="changeSelectedDepartment"
			></departmentCheckbox>

			<div v-if="!loadingFlag" class="w-full px-0 space-y-3 columns-1 sm:px-6">
				<div v-for="{ name } in chartsCfg" :key="name" class="flex-1">
					<myChart
						bodyClass="w-full h-[32rem]"
						:name="name"
						:getDomRef="getDomRef"
						title=""
						:focusChart="focusChart"
						@toggle-focus="(e) => (focusChart = e)"
					/>
				</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, reactive, onMounted, nextTick } from 'vue';
import myChart from '@/common/components/myChart.vue';
import { nlData } from '@/components/options/FanXiang/nlData';
import departmentCheckbox from '@/common/components/departmentCheckbox.vue';
import { watchResize, watchFocus } from '@/components/home/logic';
import filterData from '@/common/filterData';
import fetchData from './fetchData';
import department from '@/common/getDepartment';
const { department1, department2 } = department;
import { ElLoading } from 'element-plus';

window.dataPool = window.dataPool || {};

const getOptionFn = () => import('@/components/options/getOption');

let dataPool = {};
const loadingFlag = ref(true);

const sourceCache = {};

const statisticCard = reactive([
	[
		{
			title: '宽带派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_xp.all,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: '宽带归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_gd.all,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
	[
		{
			title: '手宽派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_xp.shoukuan,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: '手宽归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_gd.shoukuan,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
	[
		{
			title: '全家享派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_xp.quanjiaxiang,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: '全家享归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_gd.quanjiaxiang,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
	[
		{
			title: '金牛派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_xp.jinniu,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: '金牛归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_gd.jinniu,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
	[
		{
			title: '重点小区派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_xp.kaimenhong,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: '重点小区归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.kuandai_gd.kaimenhong,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
	[
		{
			title: '组网派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_xp.zuwang,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: '组网归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_gd.zuwang,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
	[
		{
			title: 'FTTR派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_xp.FTTR,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: 'FTTR归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_gd.FTTR,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
	[
		{
			title: '看家派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_xp.kanjia,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: '看家归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_gd.kanjia,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
	[
		{
			title: '平安乡村派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_xp.pinganxiangcun,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: '平安乡村归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_gd.pinganxiangcun,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
	[
		{
			title: '门锁派单',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_xp.mensuo,
				selectedDepartment.value.flat(),
				'max',
			],
		},
		{
			title: '门锁归档',
			func: 'count',
			param: () => [
				dataPool.dataPool1.xinyewu_gd.mensuo,
				selectedDepartment.value.flat(),
				'max',
			],
		},
	],
]);

const updateStatisticCard = () => {
	statisticCard.forEach((card) => {
		card.forEach((item) => {
			item.value = filterData[item.func](...item.param());
		});
	});
};

const focusChart = ref(''),
	domChart = reactive({}),
	includesDepartment1 = ref(true),
	includesDepartment2 = ref(false);

window.allCharts = window.allCharts || {
	ZongTi: {},
	FanXiang: {},
	KaiTong: {},
	XinYeWu: {},
	TouSu: {},
	FenBu: {},
	ZongTi2: {},
};
const charts = window.allCharts['ZongTi2'];

const getDomRef = (name) => (el) => (domChart[name] = ref(el));

const selectedDepartment = ref([[], []]),
	mergeDepartment = ref([]),
	changeSelectedDepartment = (e) => {
		const { dataPool1, dataPool2 } = dataPool;
		selectedDepartment.value = e;
		updateStatisticCard();
		mergeDepartment.value = department.mergeSelection(selectedDepartment.value);
		includesDepartment1.value =
			department1.some((value) => e.flat().includes(value)) || !e.flat().length;
		includesDepartment2.value = department2
			.flat()
			.some((value) => e.flat().includes(value));

		Object.keys(charts).forEach((name) => {
			const option = charts[name].option;
			if (option.getChartData) {
				const newData = option.getChartData(
					[dataPool1, dataPool2],
					e,
					mergeDepartment.value
				);
				sourceCache[name] = newData;
				charts[name].setOption(option);
			}
		});
	};

const chartsCfg = [
	{
		name: 'KaiTongRenJunChanNeng',
		dir: 'ZongTi',
	},
	{
		name: 'KaiTongPaiDanGuiDang',
		dir: 'FanXiang',
	},
];

onMounted(async () => {
	if (!window.dataPool.dataPool1) {
		const loading = ElLoading.service({
			lock: true,
			text: '加载中',
			background: 'rgba(0, 0, 0, 0.7)',
		});
		const _dataPool = await fetchData();
		window.dataPool = _dataPool;

		dataPool = { ..._dataPool };

		loading.close();
		loadingFlag.value = false;

		await nextTick(() => {
			setChart(_dataPool);
		});
	} else {
		dataPool = window.dataPool;
		loadingFlag.value = false;
		await nextTick(() => {
			setChart(window.dataPool);
		});
	}
});

function setChart(dataPool) {
	const { dataPool1, dataPool2 } = dataPool;

	updateStatisticCard();
	chartsCfg.forEach(async ({ name: chart, dir }) => {
		charts[chart] = echarts.init(domChart[chart]);
		const getOption = (await getOptionFn()).default;
		const option = await getOption(dir, chart);
		const newData = option.getChartData([dataPool1, dataPool2]);
		sourceCache[chart] = newData;

		charts[chart].setOption(option);
		charts[chart].option = option;
	});

	watchFocus(focusChart, charts);
	watchResize(charts);
}
</script>

<style scoped>
.el-card {
	flex: 1;
}
</style>
